<template>

    <div class="main">

        <div class="videoDiv">
            <video :autoplay="true" :muted="true" :loop="true" class="backVideo">
                <source src="../../../video/back.mp4" />
            </video>
        </div>

        <div class="fromDiv">

            <div class="leftDiv">

            </div>

            <div class="from">
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
                    <div class="login-title">{{ $t('app.signIn') }}</div>
                    <el-form-item prop="mobile">
                        <el-input class="mobile" v-model="loginForm.mobile" :prefix-icon="User"
                            :placeholder="$t('app.username')">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input class="mobile" v-model="loginForm.password" :prefix-icon="Lock" show-password
                            :placeholder="$t('app.password')"></el-input>
                    </el-form-item>
                    <el-form-item prop="verifyCode" class="login-captcha">
                        <div class="cc-flex flex-h-100 flex-h-between" id="verifyCode-image">
                            <el-input class="flex-h-100 mobile" v-model="loginForm.verifyCode"
                                :placeholder="$t('app.captcha')" :prefix-icon="Key"></el-input>
                            <!-- <img :src="tokenTempInfo.verifyCodeImage" @click="applyTempToken" /> -->
                            <div class="el-image-box flex-0" @click="applyTempToken()">
                                <el-image class="el-image flex-100" :src="tokenTempInfo.verifyCodeImage">
                                    <template #error>
                                        <div class="cc-flex flex-100 flex-center verifyCode-tip">点击加载</div>
                                    </template>
                                </el-image>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item class="login-button">
                        <el-button class="login-button-self" v-loading :loading="loging" type="primary"
                            @click="onLogin()">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>


    </div>

</template>


<script setup lang="ts">

import { reactive, ref, onMounted } from 'vue';
import { User, Lock, Key } from '@element-plus/icons-vue'
import { UserService } from '@/modules/user'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ElLoading } from 'element-plus'

const router = useRouter()
const { t } = useI18n()
const loging = ref<boolean>(false)

const tokenTempInfo = reactive({
    verifyCodeImage: '',
    publicKey: '',
    token: ''
})


const loginForm = reactive({
    mobile: '', //13928480615
    password: '', //admin123456
    verifyCode: '',
    token: ''
})
const dataFormRef: any = ref(null)
const loginFormRef = ref()


const loginRules = ref({
    mobile: [
        { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
        {
            validator: (rule: any, value: string, callback: any) => {
                let regExp = new RegExp('^1[3456789]\\d{9}$')
                if (!regExp.test(value)) {
                    callback(new Error('请输入正确的手机号'))
                } else {
                    callback()
                }
            }
        }
    ],
    password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
    verifyCode: [{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }]
})

onMounted(() => {
    applyTempToken()
})

function applyTempToken() {
    const loadingArea = ElLoading.service({
        target: '#verifyCode-image',
        lock: true,
        background: 'rgba(0, 0, 0, 0.5)'
    })
    loginForm.verifyCode = ''
    UserService.applyTempToken()
        .then((res: any) => {
            tokenTempInfo.verifyCodeImage = 'data:image/jpg;base64,' + res.verifyCodeImage
            tokenTempInfo.publicKey = res.publicKey
            tokenTempInfo.token = res.token
        })
        .finally(() => {
            loadingArea.close()
        })
}

function onLogin() {
    loginFormRef.value.validate((valid: boolean) => {
        if (!valid) return false
        let password = UserService.RsaEncryption(tokenTempInfo.publicKey, loginForm.password)
        loging.value = true
        router.push({ path: '/home' })
        // // 用户登录
        // store.userStore
        // 	.loginAction({ mobile: loginForm.mobile, password, token: tokenTempInfo.token, verifyCode: loginForm.verifyCode })
        // 	.then(() => {

        // 	})
        // 	.catch(() => {
        // 		applyTempToken()
        // 	})
        // 	.finally(() => {
        // 		loging.value = false
        // 	})
    })
}


</script>


<style lang="scss" scoped>
.main {
    display: flex;
    position: relative;
    width: 100%;

    .videoDiv {
        position: absolute;
        width: 100%;
        height: 100vh;

        .backVideo {
            position: absolute;
            // top: 50%;
            // right: 0px;
            // transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
        }
    }

    .fromDiv {
        position: absolute;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftDiv {
            min-width: 600px;
            min-height: 500px;
            background-color: red;
            margin-left: 20vh;
        }

        .from {
            min-width: 400px;
            height: 50%;
            margin-right: 30vh;
            background-color: white;
            border-radius: 20px;
            box-shadow: 10px;
            display: flex;

            .login-title {
                font-weight: bold;
                font-size: 30px;
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: 20px;
            }

            .mobile {
                font-size: 20px;
                margin: 20px 20px;
            }

            .login-button {
                justify-content: center;
                background-color: red;
                display: flex;
                justify-content: center;

                .login-button-self {
                    justify-content: center;
                }
            }


        }
    }
}
</style>